<template>
  <input
    class="advanced-input"
    :class="{
      'advanced-input--disabled': disabled,
      'advanced-input--readonly': readonly,
      'advanced-input--large': size === 'large',
      'advanced-input--small': size === 'small',
      'advanced-input--prefix': $slots.prefix,
      'advanced-input--suffix': $slots.suffix
    }"
    :type="type"
    :placeholder="placeholder"
    :disabled="disabled"
    :readonly="readonly"
    :value="modelValue"
    @input="handleInput"
    @blur="handleBlur"
    @focus="handleFocus"
    v-bind="$attrs"
  />
</template>

<script setup>
import { useSlots } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'default', // default, small, large
    validator: (value) => ['default', 'small', 'large'].includes(value)
  }
})

const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'change'])

const slots = useSlots()

const handleInput = (event) => {
  emit('update:modelValue', event.target.value)
}

const handleBlur = (event) => {
  emit('blur', event)
}

const handleFocus = (event) => {
  emit('focus', event)
}
</script>

<style scoped>
.advanced-input {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-base);
  transition: var(--transition-fast);
  box-sizing: border-box;
}

.advanced-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.advanced-input::placeholder {
  color: var(--color-text-secondary);
}

.advanced-input--disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
  opacity: 0.7;
}

.advanced-input--readonly {
  background-color: var(--color-gray-50);
}

.advanced-input--large {
  padding: var(--spacing-medium) var(--spacing-large);
  font-size: var(--font-size-large);
}

.advanced-input--small {
  padding: var(--spacing-extra-small) var(--spacing-small);
  font-size: var(--font-size-small);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .advanced-input {
    padding: var(--spacing-small) var(--spacing-medium);
  }
  
  .advanced-input--large {
    padding: var(--spacing-medium) var(--spacing-large);
  }
  
  .advanced-input--small {
    padding: var(--spacing-extra-small) var(--spacing-small);
  }
}
</style>